<script setup lang="ts" name="DraggableComponentList">
import draggable from 'vuedraggable'
import { getPageList, getModuleList } from '@/api/website'
import slot_16x9 from '@/assets/slot_16x9.png'
const props = defineProps({
  componentTab: { type: String },
  pageConfig: { type: Object }
})
const pageOptions = toRef(props, 'pageConfig')
const currentTab = toRef(props, 'componentTab')
const groupWidget = ref({
  name: 'widgetDrag',
  pull: 'clone',
  put: false
})

const pageData:any = ref({
  listData: {
    imagePreviewList: [],
    total: 0,
    data: []
  },
  searchData: {
    industry: '',
    device: [],
    title: '',
    pageType: '',
    moduleType: 'header'
  }
})
const pageIndex = ref(1)
const pageSize = ref(20)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  pageIndex.value = 1
  getInitData()
}

const handleCurrentChange = (val: number) => {
  pageIndex.value = val
  getInitData()
}

const resetPageData = () => {
  pageData.value.listData.data = []
  pageData.value.listData.total = 0
  pageData.value.listData.imagePreviewList = []
}
const getInitData = () => {
  resetPageData()
  const result: any = {}
  result.pageIndex = pageIndex.value
  result.pageSize = pageSize.value
  result.title = pageData.value.searchData.title
  result.industry = pageData.value.searchData.industry
  result.isDesigner = true
  if (currentTab.value === 'pageComponent') {
    result.pageType = pageData.value.searchData.pageType
    result.device = [pageData.value.searchData.device]
    getPageList(result, { config: { showLoading: false, mockEnable: true } }).then((res:any) => {
      console.log(res)
      if (res.data && res.data.length > 0) {
        setTimeout(() => {
          res.data.forEach(function (item) {
            item.imageLoaded = 'loading'
            item.src = 'https://cdn.jsdelivr.net/gh/kaivin/images/list/' + item.type + '/' + item.img + '.jpg'
            pageData.value.listData.data.push(item)
            pageData.value.listData.imagePreviewList.push(item.src)
          })
          pageData.value.listData.total = res.total
        }, 1000)
      }
    })
  } else if (currentTab.value === 'widgetComponent') {
    console.log(pageData.value.searchData.moduleType)
    result.moduleType = pageData.value.searchData.moduleType
    getModuleList(result, { config: { showLoading: false, mockEnable: true } }).then((res:any) => {
      console.log(res)
      if (res.data && res.data.length > 0) {
        setTimeout(() => {
          res.data.forEach(function (item) {
            item.imageLoaded = 'loading'
            item.src = 'https://cdn.jsdelivr.net/gh/kaivin/images/list/' + item.type + '/' + item.img + '.jpg'
            pageData.value.listData.data.push(item)
            pageData.value.listData.imagePreviewList.push(item.src)
          })
          pageData.value.listData.total = res.total
        }, 1000)
      }
    })
  }
}
const changeModuleTypeHandler = (v) => {
  pageData.value.searchData.moduleType = v
  getInitData()
}
const resetSearch = () => {
  pageData.value.searchData.title = ''
  getInitData()
}
const imageLoadSuccess = (e, v) => {
  pageData.value.listData.data.forEach((item, index) => {
    if (item.id === v.id) {
      item.imageLoaded = 'success'
    }
  })
}
const imageLoadError = (e, v) => {
  pageData.value.listData.data.forEach((item, index) => {
    if (item.id === v.id) {
      item.imageLoaded = 'error'
    }
  })
}
const emit = defineEmits(['dragEnd'])
// 拖拽结束的事件
const onDragEnd = (e) => {
  console.log(e, '结束拖拽')
  emit('dragEnd', e)
}
// 子组件将方法暴露给父组件
defineExpose({ getInitData, changeModuleTypeHandler })
</script>

<template>
  <div class="list-component">
    <div class="list-search">
      <el-form :inline="true">
        <el-form-item label="名称">
          <el-input v-model="pageData.searchData.title" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getInitData"></el-button>
          <el-button icon="Refresh" @click="resetSearch"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="list-content">
      <el-scrollbar>
        <draggable v-model="pageData.listData.data" :group="groupWidget" item-key="id" :sort="false" ghostClass="ghost" chosenClass="chosen" filter=".forbid" @end="onDragEnd">
          <template #item="{ element, index }">
            <el-card class="item-card column" shadow="never">
              <div :class="['image-wrap', 'image-load-'+ element.imageLoaded]">
                <div class="image-mask"></div>
                <el-image :src="element.src" fit="cover" :preview-src-list="pageData.listData.imagePreviewList" :initial-index="index" lazy @load="(e) => { imageLoadSuccess(e, element) }" @error="(e) => { imageLoadError(e, element) }">
                  <template #placeholder>
                    <div class="image-slot">
                      <img :src="slot_16x9" />
                      <div class="slot-content">
                        <svg-icon icon="ep:picture"></svg-icon>
                        <p>{{$t('settings.settingLoadingText')}}</p>
                      </div>
                    </div>
                  </template>
                  <template #error>
                    <div class="image-slot">
                      <img :src="slot_16x9" />
                      <div class="slot-content">
                        <svg-icon icon="ii:icon-image-failed"></svg-icon>
                        <p>{{$t('settings.settingLoadingFailed')}}</p>
                      </div>
                    </div>
                  </template>
                </el-image>
              </div>
              <div class="item-title">
                {{element.title}}
              </div>
              <div class="item-description">{{element.description}}</div>
            </el-card>
          </template>
        </draggable>
      </el-scrollbar>
    </div>
    <div class="list-pagination" v-if="pageData.listData.total>0">
      <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[20, 40, 100, 200]" :background="true" layout="total, sizes, prev, next" :total="pageData.listData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.list-component{
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;

  .list-search{
    padding: 6px;
    border-bottom: 1px solid var(--el-border-color-lighter);
  }

  .list-content{
    position: relative;
    flex: 1;

    .el-scrollbar{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;

      :deep(.el-scrollbar__view){
        padding: var(--el-space) var(--el-space) 0;
      }
    }

    .el-card{
      margin-bottom: var(--el-space);
      background-color: var(--el-fill-color-light);
      border: 1px solid var(--el-fill-color-light);
      border-radius: 0;
      cursor: move;

      &:hover,&:active{
        border: 1px dashed var(--el-color-primary);

        .item-title, .item-description{
          color: var(--el-color-primary);
        }
      }

      &.chosen{
        border: 1px dashed var(--el-color-primary)!important;

        .item-title, .item-description{
          color: var(--el-color-primary)!important;
        }
      }

      :deep(.el-card__body){
        padding: 0;
        overflow: hidden;
      }

      .image-wrap{
        position: relative;
        margin: 20px;
        overflow: hidden;

        &.image-load-error,&.image-load-loading{
          :deep(.el-image__wrapper){
            position: relative;
          }
        }

        &.image-load-loading{
          :deep(.el-image){
            .is-loading{
              display: none;
            }
          }
        }

        .image-mask{
          overflow: hidden;
        }

        :deep(.el-image){
          display: block;

          .el-image__inner{
            height: auto!important;
          }
        }
      }
    }

    .item-title{
      height: 24px;
      margin: 15px 20px 10px;
      overflow: hidden;
      font-weight: 700;
      font-size: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .item-description{
      margin: 0 20px 10px;
      opacity: 0.7;
    }
  }

  .list-pagination{
    padding: 10px;
    border-top: 1px solid var(--el-border-color-lighter);

    .el-pagination{
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
